/*
 * @Date: 2022-03-29 12:42:43
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-11 21:19:13
 * @FilePath: /payment/pay/src/pages/TenantAgency/TenantAgency.jsx
 */
import React, { useState, useEffect } from 'react'
import Tab from '../../components/Tabs'
import { DatePicker, Input, Form, Button, Table, Row, Col, Select, ConfigProvider, Tag } from 'antd';
import style from '../Tenant/recharge.module.css'
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import zhCN from "antd/es/locale/zh_CN";
// 引入样式
import myStyle from './../AgencyPay/CSS/AgencyPayOrder.module.css'
import qs from 'qs'
import axios from '../../util/axios'
import Export from '../Tenant/Export';
import Detailsagency from './DetailsAgency';
import Checkid from './CheckId';

const { RangePicker } = DatePicker;
const { Option } = Select;

export default function TenantRecord() {
  //分页
  let [pag, setPag] = useState({ current: 1, pageSize: 5, pageSizeOptions: [5, 10, 20], showSizeChanger: true, showQuickJumper: true, onChange: changePage })


  //表格数据
  let [data, setData] = useState()
  //是否为全部的数据
  let [isAll, setIsAll] = useState(true)
  let [form1] = Form.useForm()
  //状态数组
  let [typeArr, setTypeArr] = useState()
  //商户信息
  let [userM, setUserM] = useState({})
  //账户余额
  let [number, setNumber] = useState()
  useEffect(() => {

    if (isAll) {
      axios({
        url: '/daiFuDingDan',
        method: 'get',
        params: {
          limit: pag.pageSize.toString(),
          name: JSON.parse(localStorage.getItem('user')).uName,
          page: pag.current.toString()
        },
      }).then(res => {
        console.log(res);
        if (res.code === 200) {
          setData(res.data.map(item => ({ ...item, key: item.dingDanId })))
          setPag({ ...pag, total: res.count })
          setIsAll(true)
        }
      })
      //订单状态
      axios({
        url: '/ziJinMingXi/selectDinDanZhuangTai',
        method: 'get',
        params: { name: JSON.parse(localStorage.getItem('user')).uName }
      }).then(res => {
        console.log(res);
        if (res.code === 200) {
          setTypeArr(res.data)
        }
      })
      //交易笔数等信息
      axios({
        url: '/ziJinMingXi/selectMoney',
        method: 'get',
        params: { name: JSON.parse(localStorage.getItem('user')).uName }
      }).then(res => {
        console.log(res);
        if (res.code === 200) {
          setUserM(res.data)
        }
      })
      //账户余额
      axios({
        url: '/ziJinMingXi/selectShangHuYuE',
        method: 'get',
        params: { name: JSON.parse(localStorage.getItem('user')).uName },
      }).then(res => {
        console.log(res);
        if (res.code === 200) {
          setNumber(res.data)
        }
      })
    } else {
      form1.submit()
    }

  }, [pag.current, isAll])

  const onFinish = (values) => {

    console.log('Success:', values);
    const rangeValue = values.time
    //时间格式转换
    values = {
      ...values,
      time: rangeValue && [rangeValue[0].format('YYYY-MM-DD hh:mm:ss'), rangeValue[1].format('YYYY-MM-DD hh:mm:ss')]
    }

    //搜索
    axios({
      url: '/daiFuDingDan',
      method: 'get',
      params: {
        limit: pag.pageSize.toString(),
        name: JSON.parse(localStorage.getItem('user')).uName,
        page: pag.current.toString(),
        start: values.time && values.time[0],
        end: values.time && values.time[1],
        liuShuiHao: values.serial,
        shouKuanRenXingMing: values.payee,
        dingDanZhuangTai: values.orderStatus
      },
    }).then(res => {
      console.log(res);
      if (res.code === 200) {
        setData(res.data.map(item => ({ ...item, key: item.dingDanId })))
        setPag({ ...pag, total: res.count })
        setIsAll(false)
      }
    })
  };

  //页数更改时
  function changePage(page, pageSize) {
    setPag({ ...pag, current: page, pageSize })
  }

  //改变下拉列表
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  //更改回调状态
  function callbackChange() {

  }
  //更改订单状态
  function orderChange() {

  }


  //表格列
  const columns = [
    {
      title: '商户订单号',
      dataIndex: 'dingDanId',
      key: 'dingDanId',
      fixed: 'left',
      width: 220,
    },
    {
      title: '银行名称',
      dataIndex: 'yinHangName',
      key: 'yinHangName',
      width: 120,
    },
    {
      title: '银行卡号',
      dataIndex: 'yinHangKaHao',
      key: 'yinHangKaHao',
      width: 180,
    },
    {
      title: '收款人姓名',
      key: 'chiKaName',
      dataIndex: 'chiKaName',
      width: 120,
    },
    {
      title: '实际金额',
      dataIndex: 'bianHuaJinE',
      key: 'bianHuaJinE',
      width: 100,
    },
    {
      title: '手续费',
      dataIndex: 'feiLvMoney',
      key: 'feiLvMoney',
      width: 100,
    },
    {
      title: '扣除金额',
      key: 'kouChuJinE',
      dataIndex: 'kouChuJinE',
      width: 100,
    },
    {
      title: '代付状态',
      dataIndex: 'daiFuZhuangTai',
      key: 'daiFuZhuangTai',
      width: 100,
      render: (text) => {
        return text === '未处理' ? <Tag color="#05f">未处理</Tag> :
          text === '已审核' ? <Tag color="#fa0">已审核</Tag> :
            text === 3 ? <Tag color="#05f">转账中</Tag> :
              text === '已代付' ? <Tag color="#5c5">已代付</Tag> :
                text === '已拒绝' ? <Tag color="#f50">已拒绝</Tag> : ''
      }
    },
    // {
    //   title: '回调状态',
    //   key: 'callbackStatus',
    //   dataIndex: 'callbackStatus',
    //   width: 100,
    //   render:(text)=>{
    //     return  text===1?<Tag color="#f50">未回调</Tag>:
    //             text===2?<Tag color="#5c5">已回调</Tag>:
    //             text===3?<Tag color="#05f">已失败</Tag>:''
    //     }
    // },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      width: 180,

    },

    {
      title: '代付时间',
      key: 'caoZuoShiJian',
      dataIndex: 'caoZuoShiJian',
      width: 180,

    },
    // {
    //   title: '回调时间',
    //   key: 'callbackTime',
    //   dataIndex: 'callbackTime',
    //   width: 180,
    // },
    {
      title: '操作',
      key: 'action',
      width: 100,
      fixed: 'right',
      render: (text, record) => (
        <>
          <Detailsagency data={record} />
        </>
      ),
    },
  ];

  //表格数据
  // const data = [
  //   {
  //     key: '1',
  //     orderId:'15465234323243535',
  //     bankName:'建设银行',
  //     card:'5845643246545',
  //     recName:'张三',
  //     actualNum: 2000,
  //     serviceNum: 20,
  //     dedNum: 2020,
  //     payStatus: 1,
  //     callbackStatus:1,
  //     createTime:'2020-10-12 12:30',
  //     payTime:'2020-10-12 13:30',
  //     callbackTime:'2020-10-12 14:30'
  //   },
  // ];
  return (
    <div>

      <Tab title="商户代付订单" />
      <Form
        name="basic"
        form={form1}
        onFinish={onFinish}
        autoComplete="off"
        layout='inline'
        className={style.content}
      >
        <Form.Item name="serial" >
          <Input placeholder="系统订单号/代付订单号" style={{ width: '210px', marginBottom: '20px' }} />
        </Form.Item>
        <Form.Item name="orderStatus">
          <Select placeholder="订单状态" style={{ width: 150 }} onChange={orderChange}>
            {
              typeArr && typeArr.map(item => {
                return <Option key={item.id} value={item.status}>{item.status}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item name='time'>
          <RangePicker showTime placeholder={['开始日期', '结束日期']} />
        </Form.Item>
        {/* <Form.Item name="callbackStatus">
        <Select placeholder="回调类型" style={{ width: 150 }} onChange={callbackChange}>
        <Option value="1">未回调</Option>
        <Option value="2">已回调</Option>
        <Option value="3">已失败</Option>
      </Select>
      </Form.Item> */}
        <Form.Item name="payee">
          <Input placeholder="收款人" />
        </Form.Item>
        <Form.Item >
          <Button type="primary" htmlType="submit" onClick={() => {
              setPag({ ...pag, current: 1 })
          }} icon={<SearchOutlined />}>
            搜索
          </Button>
        </Form.Item>
        <Form.Item >
          <Checkid isAll={isAll} />

        </Form.Item>
        <Form.Item >
          <Export data={data} header={columns} fileName='商户代付订单.xlsx' />
        </Form.Item>
        <Form.Item >
          <Button type="primary" onClick={() => {
            setIsAll(true);
            setPag({ ...pag, current: 1 });
          }
          }>
            查看全部
          </Button>
        </Form.Item>
      </Form>

      <div className={style.content}>
        {/* 表格头部信息 */}
        <Row className={myStyle.row_padding}>
          {/* 商户余额 */}
          <Col span={5} className={myStyle.col_style}>
            <span className={myStyle.col_first_span}>商户余额</span>
            <span className={myStyle.col_second_span}>
              <Input className={myStyle.col_input} disabled
                value={number || '暂无信息'} />
            </span>
          </Col>
          {/* 交易笔数 */}
          <Col span={5} className={myStyle.col_style}>
            <span className={myStyle.col_first_span}>交易笔数
            </span>
            <span className={myStyle.col_second_span}>
              <Input className={myStyle.col_input} disabled
                value={userM && userM.jiaoYiBiShu || '暂无信息'}
              />
            </span>
          </Col>
          {/* 交易金额 */}
          <Col span={5} className={myStyle.col_style}>
            <span className={myStyle.col_first_span}>交易金额</span>
            <span className={myStyle.col_second_span}>
              <Input className={myStyle.col_input} disabled
                value={userM && userM.jiaoYiJinE || '暂无信息'}
              />
            </span>
          </Col>
          {/* 手续费 */}
          <Col span={5} className={myStyle.col_style}>
            <span className={myStyle.col_first_span}>手续费</span>
            <span className={myStyle.col_second_span}>
              <Input className={myStyle.col_input} disabled
                value={userM && userM.shouXuFei || '暂无信息'}
              />
            </span>
          </Col>
        </Row>
        <ConfigProvider locale={zhCN}>
          <Table columns={columns} scroll={{ x: 1300 }} dataSource={data} pagination={pag} />
        </ConfigProvider>
      </div>
    </div>
  )
}
